<template>
	<view v-if="rpShow">
		<view class="com-rp" :class="rpShow ? 'on' : ''">
			<text class="iconfont icon-guanbi" @click="close"></text>
			<view class="rp-title">处方详情</view>
			<view class="rp-img-box">
				<swiper class="swipers" :indicator-dots="true" indicator-active-color="#e93323" :autoplay="true" :circular="true"
					:interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in rpUrls" :key="index">
						<view class="swiper-img-item" @click="clickInfo(rpUrls)">
							<image :src="item" mode="aspectFit"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="hk-safe20"></view>
		</view>
		<view class="mask" v-show="rpShow"></view>
	</view>
</template>

<script>
	import {
		getInquiryDisease
	} from '@/api/user.js';
	export default {
		name: 'rp_info',
		props: {
			rpShow: {
				type: Boolean,
				default: false
			},
			rpUrls: {
				type: Array,
				default: function() {
					return []
				}
			}
		},

		data() {
			return {

			};
		},
		mounted() {

		},
		methods: {

			close() {
				this.$emit('close')
			},
			clickInfo(urls){
				uni.previewImage({
					urls:urls
				})
			}
		}
	};
</script>

<style lang="scss">
	.com-rp {
		padding: 0 30rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		z-index: 77;
		transform: translate3d(0, 100%, 0);
		transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);

		&.on {
			transform: translate3d(0, 0, 0);
		}

		.icon-guanbi {
			position: absolute;
			font-size: 30rpx;
			top: 30rpx;
			right: 30rpx;
			color: #ccc;
		}

		.rp-title {
			padding: 30rpx 0;
			text-align: center;
			border-bottom: 1rpx solid #ddd;
		}

		.rp-img-box {
			.swipers {
				height: 400px;
				.swiper-img-item {
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}


	}
</style>